<template>
	<div class="homeitem">
		<div class="top">
			<span class="iconfont icon-zuojiantou" @click="pro()"></span>
			<div class="center">
				<img :src="arrs[0].img" />
				<div class="text">
					<h5>{{arrs[0].title}}</h5>
					<p>{{arrs[0].detail}}</p>
				</div>
				<span class="iconfont icon-jiantou1"></span>
			</div>
			<button>收藏</button>
		</div>
		<div class="cente" v-for="(v,i) in this.arrs[0].value" :key="i">
			
			<div class="content">
					<p>{{v.title}}</p>
					<ul >
						<li v-for="(v,i) in v.arr" :key="i">{{v}}</li>
					</ul>
			</div>
			</div> 
	</div>
</template>

<script>
	export default{
		methods:{
			pro(){
				this.$router.go(-1)
			}
		},
		data(){
			return{
				arrs:[]
			}
		},
		// created () {
		// //在页面加载时读取localStorage里的状态信息
		//   if (localStorage.getItem("data") ) {
		// //replaceState替换数据 Object.assign合并对象
		//   this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("data"))))
		// } 
		// //在页面刷新时将vuex里的信息保存到localStorage里
		// window.addEventListener("beforeunload",()=>{
		//   localStorage.setItem("data",JSON.stringify(this.$store.state))
		//  })
		// },
		created() {
			// console.log(this.$store.state.home.tuijian)
			// console.log(this.$store.state.home.params.id)
			this.arrs=this.$store.state.home.tuijian.filter(v=>{
				if(v.id===this.$route.params.id){
					return v
				}
			})
			// console.log(this.arrs)
		}
	}
</script>

<style lang="scss">
	.homeitem{
		width: 100%;
		font-size: 0.16rem;
		.top{
			padding: 0.14rem 0.2rem;
			width: 100%;
			height: 1.84rem;
			background-color: #4d523e;
			position: relative;
			box-sizing: border-box;
			.icon-zuojiantou{
				font-size: 0.18rem;
				color: #ffffff;
			}
			.center{
				display: flex;
				position: relative;
				margin-top: 0.17rem;
				img{
					width: 0.9rem;
					height: 0.9rem;
					border-radius: 0.1rem;
				}
				.text{
					margin-left: 0.15rem;
					h5{
						width: 1.78rem;	
						font-size: 0.15rem;
						color: #e3e4e3;
						margin-top: 0.08rem;
					}
					p{
						font-size: 0.11rem;
						margin-top: 0.11rem;
						color: #999994;
					}
					
				}
				span{
					position: absolute;
					right: -0.05rem;
					top: 0.3rem;
					color: #999b90;
					font-size: 0.16rem;
				}
				
			}
			button{
				width: 0.54rem;
				height: 0.26rem;
				position: absolute;
				font-size: 0.14rem;
				color: #FFFFFF;
				background-color: #525642;
				border: 1px solid #FFFFFF;
				line-height: 0.26rem;
				right: 0.2rem;
				border-radius: 0.1rem;
			}
			
		}
		.cente{
			width: 100%;
			background-color: #f9f9f9;
			p{
				height: 0.4rem;
				line-height: 0.4rem;
				margin-left: 4%;
			}
			ul{
				width: 100%;
				background-color: #FFFFFF;
				li{
					width: 96%;
					margin-left: 4%;
					height: 0.49rem;
					line-height: 0.49rem;
					font-size: 0.15rem;
					border-bottom: 0.01rem solid #f3f3f3;
				}
			}
		}
	}
</style>
